<template>
    <view class="handbook">
        <view class="cardBox">
            <u-tabs :list="listAll" :scrollable="false" @click="changeNational" keyName='label'
                :activeStyle="{color: '#3C9CFF',fontWeight: 'bold',fontSize: '26rpx',}"
                :inactiveStyle="{color: '#000',fontWeight: 'bold',fontSize: '26rpx',}"></u-tabs>
            <view class="listBox">
                <view class="typeBox">
                    <view class="typeItem" v-for="(item,index) in typeAllList" :key="index">
                        <view class="textBox" :class="serviceId==item.serviceType?'textBoxActive' :''" @click="serviceClick(item.serviceType)">
                            {{item.serviceType}}
                        </view>
                        <!-- <u-icon name="arrow-right"></u-icon> -->
                    </view>
                </view>
                <view class="itemBox">
                    <view v-if="guideAllList.length">
                        <view class="typeItem" v-for="(item,index) in guideAllList" :key="index"
                            @click="gotoPage('/personalCenter/handbookDetail?id='+item.id)">
                            <view class="textBox">
                                {{item.title}}
                            </view>
                            <image class="circleArrow" src="../../static/circleArrow.png"></image>
                        </view>
                    </view>
                    <view v-else>
                        <cc-empty />
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import ccBottom from '../../components/cc-bottom/cc-bottom.vue'
export default {
    data() {
        return {
            listAll: [
                {
                    label: '个人办事',
                    value: '0'
                },
                {
                    label: '企业办事',
                    value: '1'
                },
                // {
                //     label: '政策享受',
                //     value: '2'
                // },
            ],
            showTypeBox: false,
            nationalItem: {},

            list1: [
                'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                'https://cdn.uviewui.com/uview/swiper/swiper3.png',
            ],
            typeAllList: [],
            serviceId: '',
            serviceLevel: 0,
            guideAllList: [],
            highFrequency: ''
        }
    },
    onLoad(options) {
        console.log('highFrequency');
        console.log(options.highFrequency);
        this.highFrequency = options.highFrequency ? options.highFrequency : ''
    },
    onShow() {
        this.getData()
    },
    onShareAppMessage() {
        wx.showShareMenu({
            withShareTicket: true,
            menus: ['shareAppMessage', 'shareTimeline']
        });
        // return {
        //     title: "分享标题",
        //     imageUrl: "",//分享封面
        //     //如果有参数的情况可以写path
        //     path: "/myPackageF/pages/brand/brandSecondvideoSrc=" + this.videoSrc + "&series=" + this.series//此处链接为要分享的页面链接
        // };
    },
    methods: {
        setMoney(item) {
            let number1 = item.standardMoney
            let number2 = item.fastMoney
            let number3 = item.groupMoney
            if (number1 <= number2 && number1 <= number3) {
                return number1;
            }
            if (number1 >= number2 && number2 <= number3) {
                return number2;
            }
            if (number3 <= number2 && number3 <= number1) {
                return number3;
            }
        },
        getData() {
            this.$asynApi.typeAllListApi({
                highFrequency: 1,
                serviceLevel: this.serviceLevel
            }).then(res => {
                this.typeAllList = res.data
                if (this.typeAllList && this.typeAllList.length) {
                    this.serviceId = this.typeAllList[0].serviceType
                    this.getList()
                }
                else {
                    this.guideAllList = []
                }
            })
        },
        getList() {
            this.$asynApi.guideAllListApi(
                {
                    serviceTypeId: this.serviceId,
                    serviceLevel: this.serviceLevel,
                    highFrequency: 1
                }
            ).then(res => {
                console.log(res);
                this.guideAllList = res.data
            })
        },

        // 跳转页面
        toPage(url, verifyToken) {
            if (verifyToken == 'verifyToken') {
                if (uni.getStorageSync('token')) {
                    uni.navigateTo({
                        url: url,
                    })
                }
                else {
                    uni.showToast({
                        title: '请先登录',
                        icon: 'none'
                    });
                    setTimeout(val => {
                        uni.clearStorage()
                        uni.navigateTo({
                            url: '/pages/login/login',
                        })
                    }, 2000)
                }
            }
        },

        gotoPage(url) {
            uni.navigateTo({
                url: url,
            })
        },
        gotoPageURl() {
            uni.navigateTo({
                url: "/pages/login/shop"
            })
        },
        // 点击国家
        changeNational(item) {
            console.log(item)
            this.serviceLevel = item.value
            this.getData()
        },
        serviceClick(id) {
            this.serviceId = id
            this.getList()
        }
    },
}
</script>

<style lang="scss" scoped>
.status-bar {
    // height: var(--status-bar-height);
    width: 100%;
}

.handbook {
    background-color: #fff;
    .cardBox {
        width: calc(100% - 40rpx);
        margin: 0 auto;
        padding: 0rpx 20rpx 0rpx 20rpx;
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        color: #555;
        font-size: 32rpx;
        letter-spacing: 2rpx;
        position: relative;
        border-radius: 40rpx 40rpx 0 0;
        // background-color: #fff;
        overflow: hidden;
        // width: calc(100% - 40rpx);
        .listBox {
            display: flex;
            align-items: start;
            margin-top: 20rpx;
            .typeBox {
                width: 110rpx;
                height: calc(100vh - 108rpx);
                font-size: 30rpx;
                overflow-y: scroll;
                .typeItem {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 40rpx;
                    border-left: #4c87f3 8rpx solid;
                    .textBox {
                        padding-left: 12rpx;
                        font-weight: 600;
                        color: #000;
                    }
                    .textBoxActive {
                        color: #4c87f3;
                    }
                }
            }
            .itemBox {
                // padding: 0rpx 30rpx 0rpx 30rpx;
                // background-color: rgb(95, 160, 104);
                width: calc(100% - 100rpx);
                height: calc(100vh - 108rpx);
                font-size: 30rpx;
                overflow-y: scroll;
                border-left: 1rpx solid rgb(240, 240, 240);
                .typeItem {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 30rpx 20rpx 30rpx 20rpx;
                    // margin-bottom: 25rpx;
                    background-color: #fff;
                    border-bottom: 1rpx solid rgb(240, 240, 240);
                    .textBox {
                        border-left: #4c87f3 6rpx solid;
                        width: calc(100% - 76rpx);
                        padding-left: 20rpx;
                        font-size: 26rpx;
                        color: #000;
                        white-space: nowrap; /* 确保文本在一行内显示 */
                        overflow: hidden; /* 隐藏溢出的内容 */
                        text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
                    }
                    .circleArrow {
                        width: 40rpx;
                        height: 40rpx;
                    }
                }
            }
        }
    }
}
/deep/ .u-swiper__wrapper {
    height: calc(100vw * 1080 / 1920) !important;
    border-radius: 0rpx !important;
}

/deep/ .u-swiper {
    height: calc(100vw * 1080 / 1920) !important;
    border-radius: 0rpx !important;
    position: relative;
    background-color: transparent !important;
}
/deep/ .u-swiper__wrapper__item__wrapper__image {
    height: calc(100vw * 1080 / 1920) !important;
    border-radius: 0rpx !important;
    width: 100vw !important;
    image {
        width: 100vw !important;
        border-radius: 0rpx !important;
        height: calc(100vw * 1080 / 1920) !important;
    }
}
</style>